<template>
  <div>
    <div class="piLiangDownLoad" v-if="fujianObjList.length != 0 && fujianObjList.length != 1">
      <el-button type="primary" @click="downLoad" style="margin-left:20px;">批量下载</el-button>
    </div>
    <div style="font-size:24px" class="no-data" v-if="fujianObjList.length == 0">
      暂无数据
    </div>
    <div class="attachment" v-for="(v,i) in fujianObjList" :key="i">
      <div class="fujianBox" v-if="v.list != 0">
        <div class="bgFujian">
          <div class="fujianTitle">
            {{ i + 1 }}.{{ v.title }}
          </div>
          <div class="fujianContent" v-for="(item, index) in v.list" :key="index">
            <div class="fujianName">
              <i class="el-icon-document icon"></i>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.fileName"
                placement="top-start"
              >
                <p class="fujianNamePdf">{{ item.fileName }}</p>
              </el-tooltip>
            </div>
            <div class="isHover">
              <span v-show="v.title != '红线数据' && item.filePath.substring(item.filePath.indexOf('.')+1,item.filePath.length) == 'pdf'" @click="btn_see(item, index)">查看</span>
              <span @click="btn_download(item)">下载</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="noData">
        暂无数据
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      class="iframeBox"
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- <span v-show="loadIfram == 1" class="iframeLoad">
        加载中
        <div class="el-icon-loading"></div>
      </span> -->
      <div v-loading="iframeLoading" class="">
        <iframe
          id="wode"
          v-if="fujianhz == 'pdf'"
          frameborder="0"
          name="showHere"
          style="width:100%;min-height:800px;"
          scrolling="auto"
          :src="$https + filePath"
        ></iframe>
        <iframe
          id="wode1"
          v-if="fujianhz == 'dwg'"
          frameborder="0"
          name="showHere"
          style="width:100%;min-height:800px;"
          scrolling="auto"
          :src=" $httpsCad + '/?url=' + $https + filePath"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { opinionReview } from "@/api/common";
export default {
  props: ["fujianObjList","code"],
  data() {
    return {
      filePath: "", //文件路径
      title: "",
      dialogVisible: false,
      loadIfram:1,
      fujianhz:'',
      iframeLoading:false,
    };
  },
  watch:{
    filePath(val){
      var that = this
      this.iframeLoading = true
      this.$nextTick(()=>{
        var iframe = document.getElementById("wode");
        iframe.onload = function() {
          that.iframeLoading = false
        };
      })
    }
  },
  mounted() {
  },
  methods: {
    downLoad(){
      var a = document.createElement("a");
      a.setAttribute("href", this.$https + "/pc/project/opinion_review?projectId=" + localStorage.getItem("projectId") + "&enclosureType=" + this.code);
      a.click();
    },
    btn_download(item) {
      var a = document.createElement("a");
      a.setAttribute("href", this.$https + "/pc/file/download?id=" + item.id);
      a.click();
    },
    btn_see(item, index) {
      let that = this;
      that.title = item.fileName;
      that.filePath = item.filePath;
      that.fujianhz = that.filePath.substring(that.filePath.indexOf('.')+1,that.filePath.length)
      that.dialogVisible = true;
      // that.$nextTick(() => {
      //   var iframe = document.getElementById("wode");
      //   iframe.onload = function() {
      //     that.loadIfram = 2;
      //   };
      // });
    },
    // btn_see(row) {
    //   let that=this
    //   this.title = row.fileName;
    //   this.filePath = row.filePath;
    //   this.dialogVisible = true;
    //   that.$nextTick(()=>{
    //     var iframe = document.getElementById("wode");
    //       iframe.onload = function(){
    //         that.loadIfram=2
    //     };
    //   })
    // },
    handleSizeChange(val) {},
    handleCurrentChange(val) {}
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 30px;
  .attachment {
    background: #fff;
    padding: 20px;
    .page_class {
      margin-top: 20px;
      text-align: center;
    }
  }
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.fujianTitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}
.fujianContent {
  margin-left: 30px;
  background: #f5f8fa;
  width: 350px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.fujianName {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  align-items: center;
  width: 210px;
}
.fujianName .fujianNamePdf {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.fujianName .icon {
  display: block;
  font-size: 20px;
  margin-right: 10px;
  color: #409eff;
}

.isHover {
  color: #409eff;
  font-size: 13px;
  width: 80px;
  display: none;
}
.isHover span {
  padding: 0px 3px;
 margin:3px 5px 3px 0;
  cursor: pointer;
  display: block;
  float: left;
}
.fujianContent:hover .isHover {
  display: block;
}
.noData {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #606266;
  padding: 20px;
}
</style>
